<template>
  <div style="height: 100%;background: transparent">
    <el-scrollbar height="100%">
      <div class="analysis_wrapper">
        <div class="chart_wrapper left_linear_wrapper">
          <v-chart class="left_linear_chart" :option="bingchongTongjiWeekLinearOption" autoresize />
        </div>
        <div class="chart_wrapper right_linear_wrapper">
          <v-chart class="right_linear_chart" :option="bingchongTongjiMonthLinearOption" autoresize />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts" name="systemDuorouKgbotcamFileDataAnalysis">
import {Ref } from 'vue';
/**
 * 引入使用vcharts组件
 */
import VChart, { THEME_KEY } from 'vue-echarts';
import {  provide } from 'vue';

/**
 * 针对不同的图表按需引入对应的内容
 */
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import type { ComposeOption } from 'echarts/core'
import type { LineSeriesOption } from 'echarts/charts'
import type {
  TitleComponentOption,
  TooltipComponentOption,
  ToolboxComponentOption,
  GridComponentOption
} from 'echarts/components'

use([
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
])

type EChartsLinearOption = ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | ToolboxComponentOption
    | GridComponentOption
    | LineSeriesOption
    >


/**
 * 引入获取图表数据API
 */
import {getDataAnalysisByWeek,getDataAnalysisByMonth,getDataAnalysisByYear} from "/@/api/duorou/duorouKgbotcamFile";

/**
 * 定义组件属性 接收传递来的 大棚ID
 */
const props = defineProps({
  iotDevice: {
    type:Object,
    default: () => {},
  },
})

/**
 * 去除模板中直接使用的state自定义一个自己需要使用的 页面state
 */
const thisPageState = reactive({
  iotDevice: props.iotDevice,//设备信息
})
console.log("测试",thisPageState)


//调用vcharts方法设置chart.init方法中的配置
// provide(THEME_KEY, 'dark');

/**
 * 左边病虫害检测 以周几为横坐标的折线图
 */
const bingchongTongjiWeekLinearOption:Ref<EChartsLinearOption>=ref({
  title: {
    text: '病虫害检测统计-周',
    textStyle:{
      fontWeight:"normal",
      fontSize:"13px"
    },

  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false, //设置表示x和y对应而不是柱形状
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],//[15, 25, 19, 15, 6, 5, 13],
      type: 'line',
      itemStyle: {
        color: '#ee6666'  // 指定线的颜色为红色
      },
    }
  ]
})



/**
 * 右边病虫害检测 以月为横坐标的折线图
 */
const bingchongTongjiMonthLinearOption:Ref<EChartsLinearOption>=ref({
  title: {
    text: '病虫害检测统计-月',
    textStyle:{
      fontWeight:"normal",
      fontSize:"13px"
    },

  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false, //设置表示x和y对应而不是柱形状
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],//[150, 230, 130, 200, 135, 147, 150, 189, 360, 100, 310, 100],
      type: 'line',
      // smooth: true
    }
  ]
})


/**
 * 获取一周的数据统计
 */
function getWeekLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    // predictStatus:null, //多肉状态 待检测、健康、不健康
  }
  getDataAnalysisByWeek(query).then(res=>{
    let xyDataList=res.data;
    let ydata=[]
    xyDataList.map(item=>{
      ydata.push(item.ydata)
    })
    bingchongTongjiWeekLinearOption.value.series[0].data=ydata
  })
}
getWeekLinearChartData()


/**
 * 获取月统计数据
 */
function getMonthLinearChartData(){
  const query={
    iotDeviceId:thisPageState.iotDevice.id,
    // predictStatus:null, //多肉状态 待检测、健康、不健康
  }
  getDataAnalysisByMonth(query).then(res=>{
    let xyDataList=res.data;
    let ydata=[]
    xyDataList.map(item=>{
      ydata.push(item.ydata)
    })
    bingchongTongjiMonthLinearOption.value.series[0].data=ydata
  })
}
getMonthLinearChartData()

</script>

<style scoped lang="scss">
.analysis_wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  .el-scrollbar{
    background-color: var(--next-bg-main-color);
  }
  .chart_wrapper {
    width: 49%;
    padding: 10px;
    height: 339px;
  }
  .left_chart_wrapper{
    //background-color: var(--next-bg-main-color);
    .left_linear_chart{
      //width: 100%;
      //height: 100%;
    }
  }
  .right_chart_wrapper{
  }
  //.left_linear_wrapper{
  //  width: 49%;
  //  height: 100%;
  //  background-color: var(--next-bg-main-color);
  //  padding: 10px;
  //  .left_linear_chart{
  //    //width: 100%;
  //    //height: 100%;
  //  }
  //}
  //.right_linear_wrapper{
  //  padding: 10px;
  //  background-color: var(--next-bg-main-color);
  //   width: 49%;
  //   height: 100%;
  //}
}
</style>